<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
    }

    .grid {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
      display: grid;
      grid-gap: 10px;
      height: 100px;
      width: 100px;
      background: #fff;
      padding: 15px;
      border-radius: 5px;
      overflow: hidden;
      border: 1px solid skyblue;
    }

    .grid .item {
      background-color: red;
      border-radius: 50%;
    }

    .grid1 {
      grid-template-areas:
        ". . ."
        ". a ."
        ". . .";
    }

    .grid2 {
      grid-template-areas:
        ". a ."
        ". . ."
        ". b .";
    }

    .grid3 {
      grid-template-areas:
        "a . ."
        ". b ."
        ". . c";
    }

    .grid4 {
      grid-template-areas:
        "a . b"
        ". . ."
        "c . d";
    }

    .grid5 {
      grid-template-areas:
        "a . b"
        ". c ."
        "d . e";
    }

    .grid6 {
      grid-template: repeat(3, calc((100px - 20px) / 3)) / repeat(2, calc((100px - 20px) / 3));
      justify-content: space-between;
    }

    .box {
      perspective: 700px;
      width: 500px;
      height: 500px;
    }
    
    .cube {
      position: relative;
      transform-style: preserve-3d;
      transform: rotateY(0deg);
      transition: 2s;
      transform-origin: center center;
      width: 100%;
      height: 100%;
      border: 1px solid blue;
    }

    .cube .grid:nth-child(1) {
      /*先旋转90度再往相应的方向移动*/
      transform: rotateX(90deg) translateZ(100px);
    }

    .cube .grid:nth-child(2) {
      transform: rotateX(-90deg) translateZ(100px);
    }

    .cube .grid:nth-child(3) {
      transform: translateZ(100px);
    }

    .cube .grid:nth-child(4) {
      transform: translateZ(-100px);
    }

    .cube .grid:nth-child(5) {
      transform: rotateY(90deg) translateZ(100px);
    }

    .cube .grid:nth-child(6) {
      transform: rotateY(-90deg) translateZ(100px);
    }

    .cube:hover {
      transform: rotateY(360deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="cube">
      <div class="grid grid1">
        <div class="item" style="grid-area:a"></div>
      </div>
      <div class="grid grid2">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
      </div>
      <div class="grid grid3">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
        <div class="item" style="grid-area:c"></div>
      </div>
      <div class="grid grid4">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
        <div class="item" style="grid-area:c"></div>
        <div class="item" style="grid-area:d"></div>
      </div>
      <div class="grid grid5">
        <div class="item" style="grid-area:a"></div>
        <div class="item" style="grid-area:b"></div>
        <div class="item" style="grid-area:c"></div>
        <div class="item" style="grid-area:d"></div>
        <div class="item" style="grid-area:e"></div>
      </div>
      <div class="grid grid6">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
  </div>
</body>

</html>